<template>
  <div class="audio">
    <Navi :title="'收听小说'" :flexd="true" />

    <div class="abox">
      <div class="aimg">
        <img
          class="auto-img"
          :src="img1.substring(0, 1) === 'h' ? img1 : inurl + img1"
          alt=""
        />
      </div>

      <div class="atitle one-text">{{ title }}</div>

      <audio
        id="audio"
        :src="this.$root.audioSrc"
        ref="audio1"
        controls
      ></audio>

      <div class="abutton">
        <div><van-icon name="comment-o" size="28" /></div>
        <div class="duration">
          <div><van-icon name="play-circle-o" size="18" color="#333" /></div>
          <div class="autext">{{ duration }}</div>
        </div>
      </div>

      <div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="(item1, index) in list1" :key="index">
              <div class="tex">
                <div class="tbox">
                  <div class="aimg1">
                    <img class="auto-img" :src="smallHeader[index]" alt=" " />
                  </div>
                  <div class="b">
                    <div class="a">{{ nickname[index] }}</div>
                    <div class="text" v-html="content[index]"></div>
                  </div>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>



<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Audio",
  components: {
    Navi,
  },
  data() {
    return {
      acyive: 0,
      pid: "",
      title: "",
      img1: "",
      duration: "",
      play: "",
      reg: RegExp(/i/),
      length1: "",

      smallHeader: [],
      nickname: [],
      content: [],
      lid: [],
      text: [],
      inurl: "https://imagev2.xmcdn.com/",
      list1: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  created() {
    this.id = this.$route.params.trackid;
    this.getAudio(this.id);
  },
  methods: {
    getAudio(pid) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/ximalaya/album/queryAlbumTrackRecordsByPage?albumId=" +
          pid +
          "&page=1&pageSize=10&asc=true&countKeys=play,comment",
      })
        .then((result) => {
          this.lid.push(result.data.data.trackDetailInfos[0].trackInfo.id);

          this.lid.forEach((v) => {
            this.axios({
              method: "get",
              url:
                "https://apis.netstart.cn/ximalaya/track/queryTrackCommentsFirstPage?trackId=" +
                v +
                "&page=1&pageSize=20",
            })
              .then((result) => {
                this.length1 = result.data.data.comments.length;
                this.isp = true;
                this.$toast("加载成功");
                let arr = [];
                let arr1 = [];

                result.data.data.comments.forEach((v) => {
                  if (v.smallHeader.indexOf("http") === 0) {
                    arr.push(v.smallHeader);
                  } else if (v.smallHeader.indexOf("http") === -1) {
                    arr1.push(this.inurl + v.smallHeader);
                  }
                  this.nickname.push(v.nickname);
                  this.content.push(v.content);
                });
                this.smallHeader = arr.concat(arr1);
              })
              .catch((err) => {});
          });

          this.title = result.data.data.trackDetailInfos[0].trackInfo.title;

          this.img1 = result.data.data.trackDetailInfos[0].trackInfo.cover;

          this.duration =
            result.data.data.trackDetailInfos[0].trackInfo.duration;

          this.play = result.data.data.trackDetailInfos[0].trackInfo.playPath;
          this.$root.audioSrc = this.play;

          this.$refs.audio1.oncanplay = function () {
            this.play();
          };
        })
        .catch((err) => {});
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list1 = [];
          this.refreshing = false;
        }
        for (let i = 0; i < this.length1; i++) {
          this.list1.push(this.list1.length + 1);
        }
        this.loading = false;
        if (this.list1.length > this.length1 / 2) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style lang="less" scoped>
.audio {
  width: 100%;
  background-color: #f1f3f4;
  /deep/.van-cell {
    padding: 0;
    background-color: #f1f3f4;
  }

  .abox {
    width: 90%;
    height: 100%;
    margin: 10px auto 0;
    .aimg {
      width: 90%;
      margin: 0 auto;
    }

    .atitle {
      font-size: 20px;
      margin-top: 15px;
      font-weight: bold;
      color: #333;
    }
    #audio {
      width: 100%;
      height: 25px;
      margin-top: 40px;
      border-radius: 0;
    }
    .abutton {
      width: 100%;
      margin: 20px 0;
      display: flex;
      justify-content: space-between;
      .duration {
        display: flex;
        .autext {
          font-size: 18px;
          color: #333;
        }
      }
    }
    .tex {
      .tbox {
        width: 100%;
        display: flex;
        margin-top: 10px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
        .aimg1 {
          width: 40px;
          height: 40px;
        }
        .b {
          width: 100%;
          .a {
            font-size: 12px;
            color: #333;
            margin-left: 10px;
          }
          .text {
            width: 90%;
            font-size: 12px;
            margin-left: 15px;
            margin-top: 10px;
            color: #333;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            /deep/.emoji {
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>